<template>
  <div class="salary-container">
    <!-- 页面中有多少个按钮，就要绑定多个标识 -->
    <el-button v-checkBtn="'CKGZ'" type="primary">查看工资</el-button>
    <el-button v-checkBtn="'ZGZ'" type="primary">涨工资</el-button>
  </div>
</template>
<script>
export default {
  name: 'Salary'

}
</script>

<style lang="scss" scoped>
// sfc style是支持多种预处理器的，lang指定对应的预处理器
// scss,less浏览器不认识，需要我们使用loader来做转化-->所以需要转为浏览器认识的css
// 1、less里面定义变量：@color:red;
// scss里面定义变量：$color:red;,这样的话下面要使用red,就使用变量就可以了，如果要修改为blue，就只要修改$color:blue就可以了
// 2、嵌套语法
// 3、模块化：js,css，模块化都是为了解决两个问题：复用，好维护
@import '~@/styles/variables.scss';
$color: red;
.salary-container {
  padding: 30px;
  color: $color;
}
</style>
